<template>
  <div class="register-page">
    <div class="register-body">
      <div class="register-logo" />
      <div class="register-box">
        <div class="register-title">Welcome to Register</div>
        <div class="register-subtitle">输入您的信息以创建账号</div>
        <div class="register-input">
          <div class="input-wrapper">
            <el-input
              v-model="registerForm.username"
              class="ivu-input"
              placeholder="请输入注册账号"
              :prefix-icon="User"
            />
          </div>
          <div class="input-wrapper">
            <el-input
              v-model="registerForm.password"
              class="ivu-input"
              placeholder="请输入密码"
              :prefix-icon="Lock"
            />
          </div>
          <div class="input-wrapper">
            <el-input
              v-model="registerForm.repPassword"
              class="ivu-input"
              placeholder="输入确认密码"
              :prefix-icon="Lock"
            />
          </div>
          <el-button class="btn" type="success">注册</el-button>
          <div class="register-switch">
            "已经有账号？"
            <span class="to-login" @click="gotoLogin">登录账号</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {User, Lock } from '@element-plus/icons-vue'
import { reactive, ref } from "@vue/reactivity";
import { useRouter } from 'vue-router'

const router = useRouter()

const registerForm = reactive({
  username: '',
  password: '',
  repPassword: ''
})

function gotoLogin() {
  router.push({ name: 'login' })
}


</script>

<style scoped lang="scss">
.register-page {
  width: 100%;
  height: 100%;
  align-items: center;
  background-color: #f8f8f8;
  display: flex;
  justify-content: center;
  .register-body {
    align-items: center;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: auto;
    padding: 32px 0;
    width: 100%;
    .register-logo {
      cursor: pointer;
      background: url('../assets/logo.png') no-repeat 50%;
      background-size: contain;
      flex-shrink: 0;
      height: 84px;
      width: 84px;
    }
    .register-box {
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 0 10px #e6ecfa;
      margin-top: 36px;
      max-width: 90%;
      width: 400px;
      .register-title {
        font-size: 24px;
        font-weight: 600;
        margin-top: 36px;
        text-align: center;
      }
      .register-subtitle {
        color: #aaa;
        font-size: 14px;
        margin-top: 12px;
        padding: 0 12px;
        text-align: center;
      }
      .register-input {
        margin: 32px 40px;
        .input-wrapper {
          display: inline-block;
          width: 100%;
          position: relative;
          vertical-align: middle;
          line-height: normal;
          .ivu-input {
            height: 40px;
            font-size: 15px;
            color: #606266;
          }
        }
        .btn {
          width: 100%;
          height: 40px;
          font-size: 16px;
          margin-top: 40px;
        }
        .register-switch {
          color: #aaa;
          opacity: .7;
          .to-login {
            color: #67C23A;
            cursor:pointer;
          }
        }
      }
      .register-input>* {
        margin-top: 26px;
      }
    }
  }
}
</style>
